<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">班级管理</el-menu-item>
      <el-menu-item index="2">订单查看</el-menu-item>
      <el-menu-item index="3">书籍创建</el-menu-item>
      <el-menu-item index="4">消息中心</el-menu-item>
    </el-menu>
    <div class="line"></div>

    <div v-if="activeIndex === '1'">
      <ClassManage />
    </div>

    <div v-else-if="activeIndex === '2'">
      <AdminOrderView />
    </div>

    <div v-else-if="activeIndex === '3'">
      <BookCreate />
    </div>

    <div v-else-if="activeIndex === '4'">
      <MessageCenter />
    </div>

  </div>
</template>

<script>
import AdminOrderView from "./AdminOrderView.vue";
import BookCreate from "./BookCreate.vue";
import ClassManage from "./ClassManage.vue";
import MessageCenter from "./MessageCenter.vue";
import { ref } from "vue";

export default {
  name: "AdminIndex",
  components: {
    BookCreate,
    AdminOrderView,
    ClassManage,
    MessageCenter,
  },
  setup() {
    const activeIndex = ref("1");

    const handleSelect = (index) => {
      activeIndex.value = index;
    };

    return {
      activeIndex,
      handleSelect,
    };
  },
};
</script>